<script setup lang="ts">
  import { ref } from 'vue'
  const props = defineProps<{
    bg: string,
    bgList: array,
    bgStandout?: boolean,
    withBottom?: boolean,
  }>()

  const autoplay = ref(true)
</script>

<template>
  <view class="main-wrapper" :class="withBottom ? 'with-bottom-panel' : ''">
		<image v-if="bg" class="nav-bg" :src="bg" mode="widthFix" />

    <swiper
      v-if="bgList && bgList.length"
      class="swiper"
      circular
      :autoplay="autoplay"
    >
      <swiper-item v-for="(img, index) in bgList" :key="index">
        <image class="swiper-bg" :src="img" mode="widthFix" />
      </swiper-item>
    </swiper>

    <view class="main-content" :class="bgStandout ? 'p-t' : ''">
      <slot />
    </view>
  </view>
</template>

<style scoped>
  .main-wrapper {
    /* width: 100%; */
	width: 750rpx;
	overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 20px;
    box-sizing: border-box;
    padding-top: 80px;
    position: relative;
  }

  .main-wrapper .nav-bg {
    position: absolute;
    z-index: -1;
    width: 100vw;
    margin-left: -12px;
    top: 0;
  }

  .main-wrapper .swiper {
    position: absolute;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    margin-left: -12px;
    top: 0;
  }

  .main-wrapper .swiper-bg {
    width: 100%;
  }

  .main-wrapper.with-bottom-panel {
    padding-bottom: 200px;
  }

  .main-content {
    width: 100%;
    height: auto;
  }
  .main-content.p-t {
    margin-top: 160px;
  }
</style>
